<template>
  <UniPopup
    ref="cancelRegistrationRecord"
    backgroundColor="#fff"
    :borderRadius="borderRadius"
    :z-index="999"
    @maskClick="emits('update:visible', false)"
  >
    <view class="popup-content" :style="{ borderRadius }">
      <view class="h-48 disFlxCC fz-16 popup-title">
        <text>取消报名记录</text>
      </view>

      <scroll-view
        class="list-view py-12"
        scroll-y
        :enable-flex="true"
        scroll-with-animation
        scroll-anchoring
        :enhanced="true"
        :show-scrollbar="false"
      >
        <view>
          <template v-for="v in dataList" :key="v.id">
            <view class="list-item mx-12">
              <CellBox :list="getCellBoxList(v)">
                <template #title>
                  <view class="disFlxJS fz-18 mb-12">
                    <text>{{ v.cancelTime }}</text>
                    <text
                      :style="{ color: getCancelApprovalStatusText.get(v.approvalStatus)?.color }"
                    >
                      {{ getCancelApprovalStatusText.get(v.approvalStatus)?.text }}
                    </text>
                  </view>
                </template>
              </CellBox>
            </view>
          </template>
          <Empty v-if="dataList.length === 0" text="暂无数据" />
        </view>
      </scroll-view>
    </view>
  </UniPopup>
</template>

<script setup lang="ts">
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { getCurrentInstance, ref, type PropType, watch } from 'vue';
  import Empty from '@/components/Empty/Empty.vue';
  import { activityCancelRecord, sysActivityCancelRecord } from '@/api/activity';
  import {
    getCancelApprovalStatusText,
    type IActivityCancelRecordResult,
  } from '@/api/activity/types';
  import { propTypes } from '@/utils/propTypes';
  import CellBox, { type ListItem } from './CellBox.vue';

  const props = defineProps({
    visible: propTypes.bool.def(false),
    registerId: propTypes.number,
    type: String as PropType<'user' | 'admin'>,
  });

  const emits = defineEmits(['update:visible']);

  const _this = getCurrentInstance();
  const openPopup = (direction: string = 'bottom') => {
    (_this?.refs['cancelRegistrationRecord'] as any).open(direction);
  };

  watch(
    () => props.visible,
    (val) => {
      if (val) {
        getList();
        openPopup();
      }
    },
  );

  const borderRadius = ref('32rpx 32rpx 0px 0px');

  const dataList = ref<IActivityCancelRecordResult[]>([]);

  function getCellBoxList(item: IActivityCancelRecordResult): ListItem[] {
    const list: ListItem[] = [
      {
        label: '取消人',
        value: item.cancelPersonName,
      },
      {
        label: '取消原因',
        value: item.cancelReason,
      },
    ];
    if (item.verifyTime) {
      list.push({
        label: '审核人',
        value: item.verifyName,
      });
      list.push({
        label: '审核时间',
        value: item.verifyTime,
      });
    }
    if (item.remarks) {
      list.push({
        label: '驳回原因',
        value: item.remarks,
      });
    }
    return list;
  }

  function getList() {
    const api = props.type === 'admin' ? sysActivityCancelRecord : activityCancelRecord;
    api(props.registerId).then((res) => {
      dataList.value = res || [];
    });
  }
</script>

<style lang="scss" scoped>
  .popup-content {
    background-color: #f2f3f5;
    overflow: hidden;
    .popup-title {
      width: 100%;
      color: #292928;
      background-color: #fff;
    }
    .popup-bottom {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
    }
    .list-view {
      width: 100%;
      box-sizing: border-box;
      height: 800rpx;
      .list-item {
        color: #333;
        background-color: #fff;
      }
    }
  }
</style>
